<template>
    <view class="card">
        <view class="title">
            {{storeName}}
        </view>
        <view class="desc">{{tenantName}}</view>
		<!-- <view class='line'></view> -->
        <!-- <view style="display:flex; justify-content: space-between;align-items:center"> -->
		<view>
			<!-- <view class='dealer'>
				<text class='dealer_name'>所属经销商:</text>
				<text class='dealer_value'>{{tenantName}}</text>	
			</view> -->
			<view class='pay-info'>
				<view>
					<text class='info'>月还款: ¥</text>
					<text class='info1'>{{monthlyRent}}</text>
				<!-- 	<text class='info2'>起 ¥{{storeName}}</text> -->
				</view>
				<veiw v-if='schemeType !==3'>
					<text class='info3'>首付款: </text>
					<text class='info4'>¥{{downPayment}}起</text>
				</veiw>
				<view v-else>
					<text class='info3'>保证金: </text>
					<text class='info4'>¥{{deposit}}起</text>
				</view>
			</view>
			<view class='pay-info' style='padding-top:24upx'>
				<!-- <view class='pay-info-left'>
					<view class='img-box' @click.stop="showLocationToast">
						<image
						    class="icon-image"
						    src="../../static/coupon/map-navigation.png"
						    mode=""
						></image>
					</view>
					<view class='info-text'>
						最高减¥{{storeName}}
					</view>
				</view> -->
				<view class='pay-info-right'>
				<!-- #ifndef H5 -->
					<view class="phone_stl bak" @click.stop="consultingPrices()">
							<text class="phone_stl_text text-color">询问价格</text>	
					</view>
				<!-- #endif -->
					
					<view class="phone_stl bak" @click.stop="callPhone()">
							<text class="phone_stl_text text-color">致电商家</text>	
					</view>
					<view class="phone_stl" @click.stop="goOrder()">
							<text class="phone_stl_text">去下单</text>
					</view>
				</view>
			</view>
          <!--  <view class="distance" @click.stop="showLocationToast">
				<text>距离 </text> {{distance||'--km'}}
				<u-icon name="question-circle-fill" color="#333" size="12" v-if="!distance" ></u-icon>
			</view> -->
           <!-- <view class="phone_stl" @click.stop="callPhone()">
					<image
					    class="icon-image"
					    src="../../static/coupon/store_icon_phone@2x.png"
					    mode=""
					></image>
					<text class="phone_stl_text">电话</text>
				
            </view> -->
        </view>
		<view v-show='isPhone' class='phoneSty'>手机号为空!</view>
		
    </view>
</template>

<script>
import {bMapToQQMap} from '../../util/index.js';
	
export default {
    name: 'store-card',
    props: {
        storeName: {
            type: String,
            default: ''
        },
        storeAddress: {
            type: String,
            default: ''
        },
        distance: {
            type: String,
            default: ''
        },
        phone: {
            type: String,
            default: ''
        },
		tenantName:{
			type: String,
			default: ''
		},
		storeId:{
			type: String | Number,
			default: ''
		},
		monthlyRent:{
			type: String | Number,
			default: ''
		},
		downPayment:{
			type: String | Number,
			default: ''
		},
		schemeType:{
			type: String | Number,
			default: ''
		},
		deposit:{
			type: String | Number,
			default: ''
		}
		
		
    },
	data(){
		return{
			naviImg:this.baseImageUrl+'uni_rental/导航_icon@2x.png',
			phoneImg:this.baseImageUrl+'uni_rental/电话_icon@2x.png',
			isPhone:false,
			
			
		}
	},
	
    methods: {
		consultingPrices(){
			this.$emit('pricesSelect',{storeName:this.storeName,isShow:true,storeId:this.storeId})
		},
		goOrder(){
			this.$emit('storSelect',this.storeId)
		},
        callPhone() {
			
			if(this.phone){
				// #ifdef H5
				window.flutter_inappwebview.callHandler("CavanWebInteractive", {
					  action:"ToWhatsapp",
					  data:{
						phone:this.phone
					  }
				  });
				// #endif
				// #ifndef H5
					uni.makePhoneCall({
						phoneNumber: this.phone,
						success: (res) => {
						}
					})
				// #endif
			}else{
				this.isPhone = true
				setTimeout(()=>{
					this.isPhone = false
				},2000)
			}
			
        },
		// #ifndef H5
        navi() {
			
			const qqLatLng = bMapToQQMap(this.latitude, this.longitude);
            uni.openLocation({ //​使用微信内置地图查看位置。
                latitude: qqLatLng[0], //要去的纬度-地址
                longitude: qqLatLng[1], //要去的经度-地址
                name: this.storeName,
                address: this.storeAddress,
                success() {
                },
                fail(msg) {
                }
            })
        },
		// #endif
		showLocationToast(){
			if(!this.latitude || !this.longitude){
				uni.showToast({
					icon:'none',
					title:'请先允许位置授权',
				})
			}else{
				this.navi()
			}
			
		}
    }
}
</script>

<style lang="scss" scoped>

	.pay-info{
		display: flex;
		justify-content:space-between;
		margin:24upx 0upx;
		.pay-info-left{
			display: flex;
			justify-content: start;
			align-items: center;
			.img-box{
				width: 40upx;
				height: 40upx;
			}
			.info-text{
				font-size: 22upx;
				color:#FF6A15 ;
				margin-left: 5upx;
			}
		}
		.pay-info-right{
			width:100%;
			display: flex;
			justify-content:flex-end;
		}
		.info{
			font-size: 24upx;
			color:#FF6A15;
			margin-right: 5upx;
		}
		.info1{
			font-size: 28upx;
			color:#FF6A15;
			font-weight: bold;
			margin-right: 5upx;
		}
		.info2{
			font-size: 24upx;
			color:#999999;
			text-decoration: line-through;
			text-decoration-color: #999999;
		}
		.info3{
			font-size: 24upx;
			color:#666666;
			margin-right: 5upx;
		}
		.info4{
			font-size: 24upx;
			color:#666666;
		}
	}
	.phoneSty{
		position: fixed;
		top:40%;
		left:36%;
		width: 192upx;
		height:44upx ;
		background-color:#000000 ;
		color:#ffffff;
		padding:24upx 32upx;
		text-align: center;
		line-height: 44upx;
		border-radius: 8upx;
	}
.line{
	width: 100%;
	border-bottom: 1px dashed #eeeeee;
	margin-bottom: 12px;
}
.card {
    padding: 32upx 36upx;
    background: #fff;
    border-radius: 16upx;
}

.title {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 19upx;
	display: flex;
	align-items: center;
}

.tag {
    padding: 0 9upx;
    color: #fff;
    font-size: 20upx;
    border-radius: 3upx;
    background-color: #173B42;
    margin-right: 7upx;
}

.desc {
    font-size: 12px;
    color: #999;
    margin-bottom: 30upx;
}
.dealer{
	width: 90%;
	font-size: 12px;
	margin-right: 15px;
}
.phone_stl{
	padding:8px 16px;
	background-color: #173B42 ;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bak{
	background-color: #ffffff ;
	border: 1px solid #173B42;
	margin-right: 16upx;
}
.phone_stl_text{
	min-width:120upx;
	color:#fff;
	font-size: 24upx;
	text-align: center;
}
.text-color{
	color:#173B42 ;
}
.dealer_name{
	color: #999;
}

.distance {
    font-size: 26upx;
    font-weight: bold;
    color: #333;
	display: flex;
	align-items: center;
	
    text {
        color: #999;
        margin-right: 10upx;
    }
}

.icons {
    display: flex;
    width: 200upx;
    justify-content: space-between;
}

.icon-image {
    width: 16px;
    height: 16px;
}
</style>